<script setup lang="ts">
import { useSettingsStore } from '@/store/modules/settings';

const props = defineProps({
  showSearch: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array
  },
  search: {
    type: Boolean,
    default: true
  },
  gutter: {
    type: Number,
    default: 10
  }
});

const emits = defineEmits(['update:showSearch', 'queryTable', 'update:columns']);

// 显隐数据
const value = ref([]);
// 弹出层标题
const title = ref('显示/隐藏');
// 是否显示弹出层
const open = ref(false);

const columnsValue = ref(props.columns);

const theme = computed(() => useSettingsStore().theme);

const activeStyle = () => {
  return {
    'color': theme.value
  };
};

const style = computed(() => {
  const ret = {
    marginRight: undefined
  };
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret;
});

// 搜索
const toggleSearch = () => {
  emits('update:showSearch', !props.showSearch);
};

// 刷新
const refresh = () => {
  emits('queryTable');
};

// 显隐列
const dataChange = () => {
  console.log(columnsValue);
  emits('update:columns', columnsValue.value);
};

// 自动同步 props 和内部状态
watchEffect(() => {
  if (props.columns !== columnsValue.value) {
    emits('update:columns', columnsValue.value);
    columnsValue.value = props.columns;
  }
});

</script>

<template>
  <div class="top-right-btn" :style="style">
    <el-space>
      <span class="item" effect="dark" v-if="search">
        <el-button @click="toggleSearch()" link>
          <el-space>
            <span class="top-right-icon" :style="activeStyle">{{ showSearch ? '收起搜索' : '展开搜索' }}</span>
            <span v-if="showSearch">
              <el-icon class="top-right-icon"><ArrowUp /></el-icon>
            </span>
            <span v-else>
              <el-icon class="top-right-icon"><ArrowDown /></el-icon>
            </span>
          </el-space>
        </el-button>
      </span>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button circle icon="Refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columnsValue">
        <el-dropdown placement="bottom-end" size="small">
          <el-button circle icon="Menu" />
          <template #dropdown>
            <el-space wrap style="margin: 0 1em;width: 500px">
              <div v-for="item in columnsValue">
                <el-checkbox v-model="item.visible" :label="item.label" @change="dataChange" />
              </div>
            </el-space>
            <!--            <el-dropdown-menu>-->
            <!--              <el-dropdown-item style="margin: 0 1em" v-for="item in columnsValue">-->
            <!--                <el-checkbox v-model="item.visible" :label="item.label" @change="dataChange"/>-->
            <!--              </el-dropdown-item>-->
            <!--            </el-dropdown-menu>-->
          </template>
        </el-dropdown>
      </el-tooltip>
    </el-space>
  </div>
</template>

<style lang='scss' scoped>
:deep(.el-transfer__button) {
  border-radius: 50%;
  display: block;
  margin-left: 0px;
}

:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}

.my-el-transfer {
  text-align: center;
}

.item {
  margin: 0 10px;
}

.top-right-icon {
  color: var(--el-color-primary);
  transition: opacity 0.28s;
}
</style>